<template>
  <div class="ai-consultation">
    <!-- 页面头部 -->
    <div class="consultation-header">
      <div class="container">
        <div class="header-content">
          <div class="header-info">
            <h1 class="page-title">
              <el-icon class="title-icon"><Service /></el-icon>
              AI医疗咨询助手
            </h1>
            <p class="page-subtitle">智能医疗助手为您提供7×24小时专业健康咨询服务</p>
          </div>
          <div class="ai-status">
            <div class="status-indicator">
              <span class="status-dot"></span>
              <span class="status-text">DeepSeek V3 AI助手在线</span>
            </div>
            <div class="model-info">
              <span class="model-badge">OpenRouter API</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天区域 -->
    <div class="chat-container">
      <div class="container">
        <div class="chat-wrapper">
          <!-- 聊天消息区域 -->
          <div class="chat-messages" ref="messagesContainer">
            <!-- 欢迎消息 -->
            <div class="message-item ai-message" v-if="messages.length === 0">
              <div class="message-avatar">
                <el-avatar :size="40" style="background: #52c41a;">
                  <el-icon><Service /></el-icon>
                </el-avatar>
              </div>
              <div class="message-content">
                <div class="message-bubble ai-bubble">
                  <p>您好！我是智慧医疗AI助手，由DeepSeek V3模型驱动，很高兴为您服务。</p>
                  <p>🤖 <strong>AI能力升级</strong> - 现在我可以提供更智能、更个性化的医疗咨询服务</p>
                  <p>我可以为您提供：</p>
                  <ul>
                    <li>🩺 健康问题专业分析</li>
                    <li>💊 症状评估和建议</li>
                    <li>🏥 就医指导和科室推荐</li>
                    <li>💡 预防保健知识</li>
                    <li>🚨 紧急情况识别</li>
                  </ul>
                  <p>请详细描述您的健康问题，我会为您提供专业的分析和建议。</p>
                  <p style="color: #ff6b6b; font-size: 12px; margin-top: 12px;">
                    ⚠️ <strong>重要提醒：</strong>AI建议仅供参考，严重症状请及时就医
                  </p>
                </div>
                <div class="message-time">{{ getCurrentTime() }}</div>
              </div>
            </div>

            <!-- 对话消息 -->
            <div 
              class="message-item" 
              :class="{ 'user-message': msg.type === 'user', 'ai-message': msg.type === 'ai' }"
              v-for="(msg, index) in messages" 
              :key="index"
            >
              <div class="message-avatar" v-if="msg.type === 'ai'">
                <el-avatar :size="40" style="background: #52c41a;">
                  <el-icon><Service /></el-icon>
                </el-avatar>
              </div>
              
              <div class="message-content">
                <div class="message-bubble" :class="{ 'user-bubble': msg.type === 'user', 'ai-bubble': msg.type === 'ai' }">
                  <div v-if="msg.type === 'ai' && msg.isTyping" class="typing-indicator">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <div v-else v-html="formatMessage(msg.content)"></div>
                </div>
                <div class="message-time">{{ msg.time }}</div>
              </div>
              
              <div class="message-avatar" v-if="msg.type === 'user'">
                <el-avatar :size="40" style="background: #1890ff;">
                  <el-icon><User /></el-icon>
                </el-avatar>
              </div>
            </div>
          </div>

          <!-- 输入区域 -->
          <div class="chat-input-area">
            <div class="input-container">
              <el-input
                v-model="inputMessage"
                type="textarea"
                :rows="3"
                placeholder="请输入您的健康问题..."
                class="message-input"
                :disabled="isLoading"
                @keydown.ctrl.enter="sendMessage"
                resize="none"
              />
              <div class="input-actions">
                <div class="input-tips">
                  <span class="tip-text">Ctrl + Enter 发送</span>
                </div>
                <div class="action-buttons">
                  <el-button 
                    type="text" 
                    @click="clearChat"
                    :disabled="isLoading || messages.length === 0"
                  >
                    <el-icon><Delete /></el-icon>
                    清空
                  </el-button>
                  <el-button 
                    type="primary" 
                    @click="sendMessage"
                    :loading="isLoading"
                    :disabled="!inputMessage.trim()"
                  >
                    <el-icon><Position /></el-icon>
                    发送
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速问题 -->
    <div class="quick-questions" v-if="messages.length === 0">
      <div class="container">
        <h3 class="quick-title">常见问题</h3>
        <div class="questions-grid">
          <div 
            class="question-card" 
            v-for="(question, index) in quickQuestions" 
            :key="index"
            @click="askQuickQuestion(question)"
          >
            <el-icon class="question-icon"><component :is="question.icon" /></el-icon>
            <span class="question-text">{{ question.text }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 免责声明 -->
    <div class="disclaimer">
      <div class="container">
        <div class="disclaimer-content">
          <el-icon class="disclaimer-icon"><Warning /></el-icon>
          <div class="disclaimer-text">
            <p><strong>重要提示：</strong>AI助手提供的信息仅供参考，不能替代专业医生的诊断和治疗建议。如有严重健康问题，请及时就医。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Service, 
  User, 
  Position, 
  Delete, 
  Warning,
  MessageBox,
  FirstAidKit,
  Document,
  Bell
} from '@element-plus/icons-vue'

// 响应式数据
const messages = ref([])
const inputMessage = ref('')
const isLoading = ref(false)
const messagesContainer = ref(null)

// 快速问题
const quickQuestions = [
  { text: '我头痛应该怎么办？', icon: 'MessageBox' },
  { text: '发烧的处理方法', icon: 'FirstAidKit' },
  { text: '如何预防感冒？', icon: 'Document' },
  { text: '什么时候需要就医？', icon: 'Bell' }
]

// 获取当前时间
const getCurrentTime = () => {
  return new Date().toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

// 格式化消息内容
const formatMessage = (content) => {
  return content.replace(/\n/g, '<br>')
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return

  const userMessage = {
    type: 'user',
    content: inputMessage.value.trim(),
    time: getCurrentTime()
  }

  messages.value.push(userMessage)
  const userInput = inputMessage.value.trim()
  inputMessage.value = ''
  
  // 添加AI typing状态
  const typingMessage = {
    type: 'ai',
    content: '',
    time: getCurrentTime(),
    isTyping: true
  }
  messages.value.push(typingMessage)
  
  scrollToBottom()
  isLoading.value = true

  try {
    // 调用AI API
    const aiResponse = await callAIAPI(userInput)
    
    // 移除typing消息
    messages.value.pop()
    
    // 添加AI回复
    messages.value.push({
      type: 'ai',
      content: aiResponse,
      time: getCurrentTime(),
      isTyping: false
    })
    
  } catch (error) {
    console.error('AI API调用失败:', error)
    
    // 移除typing消息
    messages.value.pop()
    
    // 添加错误消息
    messages.value.push({
      type: 'ai',
      content: '抱歉，我暂时无法回答您的问题。请稍后再试，或联系人工客服。',
      time: getCurrentTime(),
      isTyping: false
    })
    
    ElMessage.error('AI服务暂时不可用')
  } finally {
    isLoading.value = false
    scrollToBottom()
  }
}

// 调用AI API
const callAIAPI = async (message) => {
  // 模拟API调用延迟，提供更真实的体验
  await new Promise(resolve => setTimeout(resolve, 500))
  
  try {
    // 首先尝试使用OpenRouter API
    const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer 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',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        model: 'deepseek/deepseek-chat-v3-0324:free',
        messages: [
          {
            role: 'system',
            content: `你是一个专业的医疗咨询AI助手，名字叫"智慧医疗助手"。请遵循以下原则：

1. 提供专业但易懂的医疗建议和健康指导
2. 始终强调严重症状需要及时就医，AI建议不能替代专业医生诊断
3. 使用温和、关怀的语气，让患者感到安心
4. 提供实用的家庭护理方法和预防措施
5. 对于复杂或严重的症状，建议就医并说明原因
6. 使用适当的医学术语，但要解释清楚
7. 回复要有条理，使用适当的格式（如分点列举）
8. 在回复末尾提醒这是AI建议，严重情况需就医

请用中文回复，语气专业而温和。`
          },
          {
            role: 'user',
            content: message
          }
        ],
        max_tokens: 800,
        temperature: 0.7,
        top_p: 0.9,
        frequency_penalty: 0.1,
        presence_penalty: 0.1
      })
    })

    if (response.ok) {
      const data = await response.json()
      if (data.choices && data.choices[0] && data.choices[0].message) {
        return data.choices[0].message.content
      } else {
        throw new Error('API响应格式错误')
      }
    } else {
      const errorData = await response.json().catch(() => ({}))
      console.error('OpenRouter API错误:', response.status, errorData)
      throw new Error(`API请求失败: ${response.status}`)
    }
    
  } catch (error) {
    console.error('OpenRouter API调用失败:', error)
    
    // 如果API调用失败，回退到本地智能回复
    console.log('回退到本地智能回复系统')
    const smartResponse = getSmartLocalResponse(message)
    if (smartResponse) {
      return `⚠️ *当前使用本地AI回复系统*\n\n${smartResponse}`
    }
    
    // 最后的回退选项
    return getDefaultLocalResponse(message)
  }
}

// 智能本地回复系统
const getSmartLocalResponse = (message) => {
  const msg = message.toLowerCase()
  
  // 医疗专业回复库
  const medicalResponses = {
    // 常见症状
    '头痛|头疼|偏头痛': {
      response: `关于头痛问题，我来为您分析：

**可能原因：**
• 紧张性头痛（最常见）
• 偏头痛
• 睡眠不足或疲劳
• 脱水
• 眼疲劳

**缓解建议：**
1. 🌙 **充足休息** - 保证7-8小时睡眠
2. 💧 **多喝水** - 每天至少8杯水
3. 🧘 **放松按摩** - 轻按太阳穴
4. 🚫 **避免刺激** - 减少强光、噪音
5. ❄️ **冷敷** - 可用冰袋敷额头

**⚠️ 需要就医的情况：**
• 突发剧烈头痛
• 伴有发热、呕吐
• 头痛持续超过3天
• 伴有视力模糊或意识改变

如果您的头痛频繁发作或症状严重，建议及时就医检查。`,
      category: '神经科'
    },
    
    '发烧|发热|体温': {
      response: `关于发热的处理建议：

**发热程度判断：**
• 37.3-38°C：低热
• 38-39°C：中等热
• 39-41°C：高热
• >41°C：超高热

**家庭护理：**
1. 🌡️ **监测体温** - 每4小时测量一次
2. 💧 **充足饮水** - 补充流失的水分
3. 🛌 **充分休息** - 避免剧烈活动
4. ❄️ **物理降温** - 温水擦拭身体
5. 👕 **适当穿衣** - 避免过度包裹

**药物使用：**
• 体温≥38.5°C可考虑退烧药
• 布洛芬或对乙酰氨基酚
• 按说明书用量使用

**🚨 紧急就医指征：**
• 持续高热不退
• 伴有皮疹、呼吸困难
• 意识改变或抽搐
• 婴幼儿发热

发热是身体的自然防御反应，但要密切观察伴随症状。`,
      category: '内科'
    },
    
    '咳嗽|咳痰|咳血': {
      response: `咳嗽的分析和建议：

**咳嗽类型：**
• **干咳** - 无痰或少痰
• **湿咳** - 有痰液咳出
• **急性咳嗽** - 持续<3周
• **慢性咳嗽** - 持续>8周

**缓解措施：**
1. 🍯 **蜂蜜水** - 润燥止咳（1岁以上）
2. 💨 **蒸汽吸入** - 缓解咽喉干燥
3. 🚭 **避免刺激** - 远离烟雾、粉尘
4. 💧 **充足饮水** - 稀释痰液
5. 🏠 **室内加湿** - 保持湿度50-60%

**不同颜色痰液意义：**
• 白色泡沫痰：可能肺水肿
• 黄绿色痰：细菌感染
• 铁锈色痰：可能肺炎
• 带血痰：需要及时就医

**⚠️ 就医指征：**
• 咳血或血痰
• 伴有胸痛、气促
• 高热不退
• 咳嗽超过2周不愈

请根据咳嗽的性质和伴随症状，及时调整护理措施。`,
      category: '呼吸内科'
    },
    
    '感冒|流感|鼻塞|流鼻涕': {
      response: `感冒的预防和治疗建议：

**症状识别：**
• **普通感冒**：鼻塞、流涕、轻微发热
• **流感**：高热、全身酸痛、乏力

**预防措施：**
1. 🧼 **勤洗手** - 用肥皂洗手20秒
2. 😷 **佩戴口罩** - 人群密集场所
3. 🏠 **保持通风** - 每天开窗2-3次
4. 💪 **增强免疫** - 适度锻炼
5. 🥗 **均衡饮食** - 多吃维生素C

**家庭治疗：**
• 充足休息和睡眠
• 多喝温水或温汤
• 盐水漱口缓解咽痛
• 适当补充维生素C

**用药建议：**
• 症状较重可用感冒药
• 避免滥用抗生素
• 儿童用药需谨慎

**🚨 警惕并发症：**
• 持续高热超过3天
• 严重头痛或胸痛  
• 呼吸困难
• 神志改变

感冒通常7-10天自愈，重在预防和症状缓解。`,
      category: '内科'
    },
    
    '失眠|睡不着|睡眠|入睡困难': {
      response: `睡眠问题的改善建议：

**睡眠卫生指导：**
1. ⏰ **规律作息** - 固定睡眠时间
2. 🛏️ **舒适环境** - 安静、黑暗、凉爽
3. 📱 **睡前准备** - 提前1小时停用电子设备
4. ☕ **避免刺激** - 睡前6小时避免咖啡因
5. 🏃 **适度运动** - 但睡前3小时避免剧烈运动

**放松技巧：**
• 深呼吸练习
• 渐进性肌肉放松
• 冥想或瑜伽
• 听舒缓音乐

**饮食建议：**
• 睡前避免大餐和酒精
• 可以喝温牛奶或薄荷茶
• 富含色氨酸的食物（香蕉、坚果）

**⚠️ 需要专业帮助：**
• 失眠持续超过4周
• 严重影响日常生活
• 伴有焦虑抑郁
• 打鼾或呼吸暂停

良好的睡眠对健康至关重要，建议从生活方式调整开始。`,
      category: '睡眠医学科'
    },
    
    '肚子疼|腹痛|胃痛|胃疼': {
      response: `腹痛的分析和处理：

**疼痛位置意义：**
• **上腹部** - 可能胃部问题
• **右上腹** - 肝胆系统
• **左下腹** - 结肠问题  
• **右下腹** - 注意阑尾炎
• **脐周** - 小肠问题

**常见原因：**
• 消化不良
• 胃肠炎
• 便秘
• 月经相关（女性）
• 食物中毒

**缓解措施：**
1. 🌡️ **热敷** - 温热毛巾敷腹部
2. 🧘 **按摩** - 顺时针轻柔按摩
3. 💧 **温水** - 小口慢饮温开水
4. 🍚 **清淡饮食** - 避免油腻刺激
5. 🛌 **休息** - 侧卧位缓解疼痛

**🚨 紧急就医：**
• 剧烈持续腹痛
• 伴有呕吐、发热
• 腹部僵硬或压痛明显
• 便血或呕血
• 疼痛逐渐加重

腹痛原因复杂，严重或持续疼痛请及时就医。`,
      category: '消化内科'
    },

    '便秘|排便困难|大便干燥': {
      response: `便秘的改善方法：

**便秘判断标准：**
• 排便次数<3次/周
• 大便干硬难排
• 排便费力
• 排便不尽感

**改善方法：**
1. 💧 **增加水分** - 每天2-3升水
2. 🥬 **膳食纤维** - 蔬菜、水果、全谷物
3. 🏃 **规律运动** - 每天30分钟有氧运动
4. ⏰ **定时排便** - 建立排便习惯
5. 🧘 **腹部按摩** - 顺时针按摩促进肠蠕动

**饮食建议：**
• 多吃：苹果、香蕉、燕麦、酸奶
• 少吃：油腻、精加工食品
• 适量：坚果、蜂蜜

**⚠️ 需要就医：**
• 便秘超过2周
• 伴有腹痛、血便
• 体重明显下降
• 突然出现便秘

便秘多数可通过生活调理改善，持续问题需专业评估。`,
      category: '消化内科'
    },

    '头晕|眩晕|头昏': {
      response: `头晕的分析和处理：

**头晕类型：**
• **真性眩晕** - 感觉周围旋转
• **假性眩晕** - 头昏、站立不稳
• **晕厥前状态** - 即将失去意识的感觉

**常见原因：**
• 内耳问题（最常见）
• 血压异常
• 血糖异常
• 贫血
• 颈椎问题
• 药物副作用

**应对措施：**
1. 🛌 **立即休息** - 平躺或坐下
2. 💧 **补充水分** - 预防脱水
3. 🍬 **检查血糖** - 必要时补充糖分
4. 🌡️ **测量血压** - 了解血压状况
5. 🚫 **避免突然起身** - 缓慢改变体位

**⚠️ 紧急就医：**
• 伴有意识丧失
• 剧烈头痛、呕吐
• 听力下降或耳鸣
• 肢体无力或麻木
• 言语不清

头晕原因多样，反复发作需要系统检查确定病因。`,
      category: '神经内科'
    },

    '心慌|心跳快|心悸': {
      response: `心悸的分析和建议：

**心悸表现：**
• 心跳过快（>100次/分）
• 心跳不规律
• 心跳有力感
• 胸部不适

**常见原因：**
• 情绪激动、紧张
• 剧烈运动后
• 咖啡因过量
• 甲状腺功能亢进
• 心律不齐
• 贫血

**缓解方法：**
1. 🧘 **深呼吸** - 缓慢深呼吸放松
2. 💧 **补充水分** - 避免脱水
3. 🚫 **避免刺激** - 减少咖啡因、酒精
4. 🛌 **充分休息** - 保证睡眠质量
5. 🧘‍♀️ **放松训练** - 冥想、瑜伽

**记录症状：**
• 发作时间和持续时间
• 诱发因素
• 伴随症状
• 心率数值

**🚨 立即就医：**
• 胸痛或压迫感
• 呼吸困难
• 晕厥或濒死感
• 持续心率>150次/分

心悸多数为良性，但需要医生评估排除器质性疾病。`,
      category: '心血管内科'
    },

    '过敏|皮疹|瘙痒|荨麻疹': {
      response: `过敏反应的处理：

**过敏症状：**
• 皮肤红疹、瘙痒
• 鼻塞、流涕、打喷嚏
• 眼部红肿、流泪
• 严重时可能呼吸困难

**应急处理：**
1. 🚫 **避免接触** - 立即脱离过敏原
2. ❄️ **冷敷** - 缓解皮肤瘙痒
3. 🧼 **清洁皮肤** - 温水清洗接触部位
4. 💊 **抗过敏药** - 必要时口服抗组胺药
5. 👕 **宽松衣物** - 减少皮肤摩擦

**常见过敏原：**
• 食物：海鲜、坚果、鸡蛋
• 环境：花粉、尘螨、宠物毛发
• 药物：青霉素、阿司匹林
• 化学品：洗涤剂、化妆品

**预防措施：**
• 记录过敏原并避免接触
• 外出时佩戴口罩
• 保持室内清洁
• 选择低敏感性产品

**🚨 紧急情况：**
• 呼吸困难、喘息
• 全身皮疹、肿胀
• 血压下降、意识模糊
• 需立即拨打急救电话

过敏管理重在预防，严重过敏需要专业治疗。`,
      category: '皮肤科/过敏科'
    }
  }
  
  // 匹配关键词
  for (const [keywords, data] of Object.entries(medicalResponses)) {
    const keywordList = keywords.split('|')
    if (keywordList.some(keyword => msg.includes(keyword))) {
      return `${data.response}\n\n**建议科室：** ${data.category}\n**⚠️ 重要提醒：** 以上建议仅供参考，如症状严重或持续，请及时就医获得专业诊断和治疗。`
    }
  }
  
  return null
}

// 默认本地回复
const getDefaultLocalResponse = (message) => {
  // 根据消息长度和内容特征提供不同的回复
  const msgLength = message.length
  const hasSymptom = /痛|疼|不舒服|难受|症状/.test(message)
  const hasQuestion = /怎么|如何|什么|为什么|能否|可以/.test(message)
  const hasMedicine = /药|治疗|吃什么|用什么/.test(message)
  
  const responses = [
    `感谢您的咨询："${message}"

**🔍 症状分析**
根据您的描述，我建议您注意以下几点：

**📋 观察要点**
• 详细记录症状出现的时间、程度和变化
• 注意是否有加重或缓解的趋势  
• 记录可能的诱发因素
• 观察伴随的其他症状

**🏥 就医指导**
${hasSymptom ? '• 如症状持续加重或超过48小时，建议及时就医' : '• 如有任何不适症状，请及时关注并考虑就医'}
• 可优先咨询全科医生进行初步评估
• 紧急情况请立即拨打120急救电话
• 携带相关检查资料和用药史

**💡 健康建议**
• 保持良好的作息和饮食习惯
• 适度运动，增强身体免疫力
• 定期体检，及时发现潜在问题
• 保持积极乐观的心态

**⚠️ 重要提醒**
此建议仅供参考，不能替代专业医生的诊断和治疗。如有严重不适，请立即就医。`,
    
    `针对您提到的"${message}"，我来为您提供专业建议：

**📊 初步评估**
${msgLength > 20 ? '感谢您详细的描述，这有助于更好地分析问题。' : '建议您提供更多症状细节，以便给出更准确的建议。'}

**🩺 处理原则**
1. **观察记录** - 详细记录症状的时间、性质和变化
2. **适当休息** - 保证充足的睡眠和休息
3. **饮食调理** - 选择清淡易消化的食物，多补充水分
4. **避免刺激** - 减少可能加重症状的因素

${hasQuestion ? `**❓ 关于您的疑问**
您提出的问题很有针对性。建议您：
• 咨询专业医师获得权威解答
• 查阅权威医学资料
• 关注症状的发展变化` : ''}

${hasMedicine ? `**💊 用药提醒**
关于药物使用，请注意：
• 务必在医师指导下用药
• 仔细阅读药物说明书
• 注意药物的不良反应
• 不要自行调整剂量` : ''}

**🚨 警示信号**
如出现以下情况，请立即就医：
• 症状急剧恶化或持续不缓解
• 出现发热、呕吐等新症状  
• 影响正常生活和工作
• 出现意识改变或严重不适

**📱 后续建议**
• 保持与医师的良好沟通
• 按时复查和随访
• 建立健康档案记录
• 学习相关健康知识

希望这些建议对您有帮助。记住，任何持续或严重的症状都应寻求专业医生的帮助。`,

    `关于"${message}"这个问题，我来为您详细解答：

**🧠 专业分析**
${hasSymptom ? '您描述的症状需要综合分析，可能涉及多个系统。' : '健康问题往往是多因素的，需要全面评估。'}

**📈 建议流程**
**第一步：自我评估**
• 回顾症状出现的背景和诱因
• 评估症状的严重程度（1-10分）
• 记录症状对日常生活的影响

**第二步：基础护理**  
• 保持充足休息，避免过度劳累
• 调整饮食结构，选择营养均衡的食物
• 适当运动，但避免剧烈活动
• 保持环境清洁和空气流通

**第三步：专业咨询**
• 如症状持续或加重，及时就医
• 准确描述症状的特点和变化
• 提供完整的病史和用药史
• 配合医师完成必要检查

**🔬 预防为主**
• 养成良好的生活习惯
• 定期进行健康体检
• 学习基本的健康知识
• 建立健康的生活方式

**📞 紧急情况**
如遇到以下情况，请立即拨打急救电话：
• 意识丧失或严重意识障碍
• 呼吸困难或胸痛
• 大量出血或剧烈疼痛
• 中毒或严重过敏反应

您的健康是最重要的，请根据实际情况及时寻求专业医疗帮助。`
  ]
  
  // 根据消息特征选择最合适的回复
  if (hasSymptom && hasMedicine) {
    return responses[1] // 症状+用药相关的详细回复
  } else if (hasQuestion) {
    return responses[2] // 问题导向的回复  
  } else {
    return responses[0] // 通用回复
  }
}

// 快速提问
const askQuickQuestion = (question) => {
  inputMessage.value = question.text
  sendMessage()
}

// 清空聊天
const clearChat = () => {
  messages.value = []
  ElMessage.success('聊天记录已清空')
}

// 组件挂载
onMounted(() => {
  // 初始化滚动位置
  scrollToBottom()
})
</script>

<style scoped>
.ai-consultation {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 页面头部 */
.consultation-header {
  background: white;
  padding: 32px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #262626;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 2rem;
  color: #52c41a;
}

.page-subtitle {
  color: #8c8c8c;
  font-size: 1rem;
  margin: 0;
}

.ai-status {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(82, 196, 26, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  color: #52c41a;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52c41a;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.model-info {
  display: flex;
  align-items: center;
}

.model-badge {
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(24, 144, 255, 0.2);
}

/* 聊天容器 */
.chat-container {
  padding: 32px 0;
}

.chat-wrapper {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

/* 消息区域 */
.chat-messages {
  height: 600px;
  overflow-y: auto;
  padding: 24px;
  background: #fafafa;
}

.message-item {
  display: flex;
  margin-bottom: 24px;
  animation: slideInUp 0.3s ease;
}

.message-item.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  flex-shrink: 0;
  margin: 0 12px;
}

.message-content {
  flex: 1;
  max-width: 70%;
}

.message-bubble {
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 6px;
  word-wrap: break-word;
  line-height: 1.6;
}

.ai-bubble {
  background: white;
  border: 1px solid #e8e8e8;
  border-bottom-left-radius: 4px;
}

.user-bubble {
  background: #1890ff;
  color: white;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}

.message-time {
  font-size: 12px;
  color: #8c8c8c;
  text-align: right;
}

.user-message .message-time {
  text-align: left;
}

/* 打字指示器 */
.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8c8c8c;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 输入区域 */
.chat-input-area {
  padding: 24px;
  border-top: 1px solid #f0f0f0;
  background: white;
}

.input-container {
  position: relative;
}

.message-input :deep(.el-textarea__inner) {
  border-radius: 12px;
  border: 2px solid #f0f0f0;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  transition: all 0.3s ease;
}

.message-input :deep(.el-textarea__inner):focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.tip-text {
  font-size: 12px;
  color: #8c8c8c;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 快速问题 */
.quick-questions {
  padding: 32px 0;
}

.quick-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 24px;
}

.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.question-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

.question-icon {
  font-size: 20px;
  color: #52c41a;
  flex-shrink: 0;
}

.question-text {
  font-weight: 500;
  color: #262626;
}

/* 免责声明 */
.disclaimer {
  background: #fff3cd;
  border-top: 1px solid #ffeaa7;
  padding: 24px 0;
}

.disclaimer-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.disclaimer-icon {
  font-size: 20px;
  color: #faad14;
  flex-shrink: 0;
  margin-top: 2px;
}

.disclaimer-text {
  flex: 1;
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1.6;
}

/* 动画 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .chat-messages {
    height: 400px;
    padding: 16px;
  }

  .message-content {
    max-width: 85%;
  }

  .questions-grid {
    grid-template-columns: 1fr;
  }

  .input-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .action-buttons {
    justify-content: flex-end;
  }
}
</style> 